дивный макет ( помогите)

seregascs · May 12, 2011

Здраствуйте!Помогите нубу решить проблемму.недавно начал изучать хтмл и ксс и сегодня решил впервые попрактиковатся над созданием макета. Собстенна вот создал макет

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="://1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style>
html,body {
	margin:0 auto; 
	height:100%;}
#contener { 
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px; 
    width:1000px; background:#FC3; 
    }
#head {
	height:96px; 
	background:#CCC;
	margin:0 auto}
#left {
    width:200px; 
    float:left;
	margin:0;}
#cont { 
    min-height:82%; 
    width:800px;
	margin-left:200px;
    background: #FFC; 
    }
#foot {
	height:50px;
	background: #09F;
	margin:0 auto;
	width:1000px;
	}
#push {height:50px; margin:0;}
</style>
</head>

<body>
<div id="contener">
<div id="head">шапка</div>
<div id="left">меню</div>
<div id="cont">контент</div><div id="push"></div>
</div>
<div id="foot">подвал</div>
</body>
</html>

Сначала за образец взял 2х колоночный макет с этого сайта, и всё бы хорошо, но подвал нехотел становится в низ страницы(макет сужался или увиличивался за счет контента в основном блоке),нашел решение в инете-добавил к ид=contener другие значения и добавил ид=push(что дает этот пусш я никак понять немогу,обьясните)и подвал встал на место.Но появилась другая проблема- в мазиле фон основ.блока недоходит до подвала(если мало контента), в опере все нормально, подскажите можно это как нибудь решить?. И вобщем макет правильный или можно зделать пропроще?

Edited May 12, 2011 by seregascs

tt48 · May 12, 2011

Код - в теги( в панельке ответа сверху)

Пример - на хостинг, ссылку сюда.

Softlink · May 12, 2011

вот код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />
<link rel="stylesheet" href="style.css">
</head>
<style>
html,body {
margin:0 auto; 
height:100%;}

#contener { 
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; 
width:1000px; background:#FC3; 
overflow:hidden;
}
#head {
height:96px; 
background:#CCC;
margin:0 auto}

#left {
width:200px; 
float:left;
margin:0;}

#cont { 
min-height:100%; 
width:800px;
margin-left:200px;
background: #FFC; 
}
#foot {
height:50px;
background: #09F;
margin:50px auto;
width:1000px;
}
</style>

<body>
<div id="contener">
<div id="head">шапка</div>
<div id="left">меню</div>
<div id="cont">контент</div>
</div>
<div id="foot">подвал</div>


</body>

</html>

а вот Temiks в соседнем форуме толковой ссылкой по этой теме поделился http://zodios.net/htmlcss/downfooter.html почитайте.

Edited May 12, 2011 by Softlink

seregascs · May 12, 2011

вот код:
а вот Temiks в соседнем форуме толковой ссылкой по этой теме поделился http://zodios.net/htmlcss/downfooter.html почитайте.

непомогло,в мазиле все по прежнему, а в опере прокрутка добавилась.

Спасибо за ссылку, щас почитаем

Edited May 12, 2011 by seregascs

buddah · May 12, 2011

.

Edited May 12, 2011 by buddah

Softlink · May 12, 2011

подвал прижат, я вот думаю про полосу прокрутки

p.s. в хроме прижат, в мозиле нет

Edited May 12, 2011 by Softlink

seregascs · May 12, 2011

подвал прижат, я вот думаю про полосу прокрутки

думю прокрутка появилась потомучто ты здесь

#cont { 
min-height:100%; 
width:800px;
margin-left:200px;
background: #FFC

сделал min-height:100%

.

я имелл ввиду блок с ид=cont

поставил мин. высоту в пикселях изаработало

почемуже у меня в процентах неработало незнаете?

Edited May 12, 2011 by seregascs

Softlink · May 12, 2011

я имелл ввиду блок с ид=cont
поставил мин. высоту в пикселях изаработало
почемуже у меня в процентах неработало незнаете?

так это же не выход. А если контента будет больше, чем указанная высота?

seregascs · May 12, 2011

я имелл ввиду блок с ид=cont
поставил мин. высоту в пикселях изаработало
почемуже у меня в процентах неработало незнаете?
так это же не выход. А если контента будет больше, чем указанная высота?

я поставил минимальную высоту а не максимальную

Softlink · May 12, 2011

личка у тебя еще здесь не работает? Если нет, то можно сюда код посмотреть?

seregascs · May 12, 2011

личка у тебя еще здесь не работает? Если нет, то можно сюда код посмотреть?

незнаю,я толькочто зарегестрировался еще неразобрался с форумом

код в первом посте

блин в пикселях невыход, попробовал в разных разрешениях появляется прокрутка

почему здесь

#cont { 
    min-height:82%; 
    width:800px;
        margin-left:200px;
    background: #FFC;

min-height:82%; неработает в процентах(в мазиле неработает, в опере всё норм)

seregascs · May 12, 2011

залил на хостинг(у меня с макетом все норм ,только вместо текста кракозябы) скажите как у вас. ссылка Edited May 12, 2011 by seregascs

Softlink · May 12, 2011

залил на хостинг(у меня с макетом все норм ,только вместо текста кракозябы) скажите как у вас. ссылка

в кодировке дело

seregascs · May 12, 2011

залил на хостинг(у меня с макетом все норм ,только вместо текста кракозябы) скажите как у вас. ссылка
в кодировке дело

лучшеб написал как исправить

макет. как? норм показывает?

Edited May 12, 2011 by seregascs

Softlink · May 12, 2011

попробуй кодировку поставить

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />

и макет неровно показывает

seregascs · May 12, 2011

попробуй кодировку поставить
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />
и макет неровно показывает

где неровно

прокрутка?

Edited May 12, 2011 by seregascs

Softlink · May 12, 2011

где неровно
прокрутка?

в опере есть прокрутка небольшая. Но на то она и опера)

seregascs · May 12, 2011

в опере есть прокрутка небольшая. Но на то она и опера)

прокрутка то фигня,главное что фон основного блока до подвала доходит.

непомогла эта кодировка

Edited May 12, 2011 by seregascs

Softlink · May 12, 2011

попробуй саму страницу перекодировать в utf-8, где код пишешь

Temiks · May 12, 2011

Но появилась другая проблема- в мазиле фон основ.блока недоходит до подвала(если мало контента), в опере все нормально, подскажите можно это как нибудь решить?. И вобщем макет правильный или можно зделать пропроще?

скорей всего это из за того что у одного дива высота 100% и у второго вложенного тоже высота в %, в хроме тоже не доходит, на вашем бы месте сделал этот макет таблицей, и с фоном все будет хорошо

Softlink · May 12, 2011

скорей всего это из за того что у одного дива высота 100% и у второго вложенного тоже высота в %, в хроме тоже не доходит, на вашем бы месте сделал этот макет таблицей, и с фоном все будет хорошо

тут уже принцип

Для меня так это вообще больная тема

seregascs · May 12, 2011

попробуй саму страницу перекодировать в utf-8, где код пишешь

пишу в дреамвеавере,а как перекодировать, непойму?(поставил в самом коде обратно utf-8)

скорей всего это из за того что у одного дива высота 100% и у второго вложенного тоже высота в %, в хроме тоже не доходит, на вашем бы месте сделал этот макет таблицей, и с фоном все будет хорошо

в чем же тогда дочерний див измерять (% неработают, пикселя непадходят)

пойду статьи на эту тему позубрю,истина гдето рядом.

насчет таблиц,поначитался я всяких статей в которых пишут про преимущества блочной верстки и решил не тратить время на изучение таблиц и перейти сразу к дивам).

Edited May 12, 2011 by seregascs

Softlink · May 12, 2011

не-не, допилим на дивах. Но только уже наверное завтра.

Temiks · May 13, 2011

насчет таблиц,поначитался я всяких статей в которых пишут про преимущества блочной верстки и решил не тратить время на изучение таблиц и перейти сразу к дивам).

и чем же они по вашему плохи(хотя этот вопрос уже много раз задавали)? кто вам не дает сделать каркас таблицей, а контент в ней и все прочее на дивах, списках и т.д?

p.s. вначале бы попробовали на чем вам удобнее верстать страницы + есть макеты, при которых желательны таблицы, то есть с ними будет быстрее чем с дивами, В общем вам выбирать

Bonzash · May 13, 2011

По поводу футера. Отличный сервис есть, на будущее hттp://csstemplater.com/.

Temiks · May 13, 2011

По поводу футера. Отличный сервис есть, на будущее hттp://csstemplater.com/.

Sign In

дивный макет ( помогите)

Question

Link to comment

Share on other sites

35 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information